<template>
	<div id="collection">
		<my-header :mmm='msg'></my-header>
		<div v-if="!showstate">
			<div id="collection_main">
				<img src="/static/imgm/img3/collectNull.png">
				<p>您暂无收藏的商品，去其他页面逛逛吧</p>
			</div>
			<div id="collection_foot">
				<router-link to="/home">先去逛逛</router-link>
			</div>
		</div>
		<div class="main" v-if="showstate">
			<ul>
				<li v-for="l in list">
					<img :src="l.img"/>
					<p>{{l.name}}</p>
				</li>
			</ul>
		</div>
		
	</div>
</template>

<script>
import myHeader from './Header'
export default{
	data(){
		return{
			list : [],
			msg : '我的收藏'
		}
	},
	mounted(){
		this.list = this.$store.state.collects
		console.log(this.list)
	},
	computed:{
		showstate(){
			let i = 0;
			for( var k in this.list){
				i++;
			}
			return i>0?true:false;
		}
	},
	components : {
		myHeader
	}
}

</script>

<style scoped>
.main li{
	padding: .5rem;
	display: inline-block;
	width: 50%;
}
#collection{
	display: flex;
	flex-direction: column;
	margin-top: 1rem;
}
#collection_main{
	margin-top: 2.29rem;
}
#collection_main img{
	width: 3.45rem;
	height: 3.388rem;
	margin-left: 30%;
}
#collection_main p{
	margin-top: .562rem;
	width: 7.125rem;
	color: #999;
	font-size: .391rem;
	margin-left:15%;
}
#collection_foot{
	background: #e84c3d;
	width:80%;
	height: .85rem; 
	margin: 0 auto;
	border-radius: .134rem;
	margin-top: .562rem;
	color: #fff;
	text-align: center;
	line-height: .85rem;
	font-size: .482rem;
}
#collection_foot a{
	opacity: 0.9;
	color: #fff;
}

</style>